<template>
  <div class="page">
    <div class="ub mb">
      <div class="block ub-f1 mr">
        <Extended></Extended>
      </div>
      <div class="block ub-f1">
        <Overview style="background: rgb(13, 26, 47)"></Overview>
      </div>
    </div>
    <div class="ub">
      <div class="block ub-f1 mr">
        <Safe style="background: rgb(13, 26, 47)"></Safe>
      </div>
      <div class="block ub-f1">
        <Risk style="background: rgb(13, 26, 47)"></Risk>
      </div>
    </div>
  </div>
</template>
<script>
import Extended from "@/views/Extended/index";
import Risk from "@/views/risk/index";
import Safe from "@/views/safe/index";
import Overview from "@/views/overview/index";
export default {
  components: {
    Extended,
    Risk,
    Safe,
    Overview,
  },
  name: "Index",
  data() {
    return {};
  },
  methods: {},
};
</script>
<style scoped lang="scss">
.page {
  background-color: rgb(3, 12, 28);
  padding: 20px;
  color: white;
  height: calc(100vh - 84px);
  min-height: 800px;
}

.ub {
  height: calc(50% - 10px);

  &.mb {
    margin-bottom: 20px;
  }
}

.block {
  &.mr {
    margin-right: 20px;
  }
}
</style>
